<template>
  <!-- 晒场 -->
  <div class="bleachery-area">
      <!-- 头部 -->
      <head-usual :title="title" :to="to"></head-usual>
      <!-- 头部下方晒场分类 -->
     <mt-navbar v-model="selected">
            <mt-tab-item id="1">生活展示</mt-tab-item>
            <mt-tab-item id="2">成绩展示</mt-tab-item>
            <mt-tab-item id="3">活动展示</mt-tab-item>
            <mt-tab-item id="4">作品展示</mt-tab-item>
    </mt-navbar>
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="0">
         <mt-tab-container v-model="selected" >
            <mt-tab-container-item id="1">
                    <!-- 展示区域 -->
                <div class="area-2">
                    <div class="bleachery-item" v-for="(item,Pindex) in dailys" :key="Pindex" >
                        <dl class="item-hd">
                            <dt>
                               <router-link :to="'/m/'+item.Uid"><img :src="item.Headportrait"/></router-link> 
                            </dt>
                            <dd>
                                <p class="p-top">
                                 <router-link :to="'/m/'+item.Uid"><span class="p-name">{{item.UserName}}</span></router-link> 
                                    <span class="p-tips">{{item.Tags}}</span>
                                </p>
                                <p class="p-bottom">{{item.AddTime}}</p>
                            </dd>
                        </dl>
                        <p class="p-sentence">{{item.Info}}</p>
                        <!-- 图片 -->
                        <!--  v-bind:data-original="img.replace('_ms.','_mx.')"  -->
                          
                         <div class="img-box">
                            <div>
                                <!-- <img v-bind:data-original="img.replace('_ms.','_mx.')" v-bind:src="img" /> -->
                                <img  v-for="(img,index) in item.ArrAtlas" :key="index" :src="img" :preview="item.Id" preview-text="上下拖动图片可退出预览">
                            </div>
                            
                        </div>
                        <!-- 打赏 -->
                        <div class="reward-area">
                            <div @click="rewardShow(item.Id)" class="reward-button">
                                <svg class="icon  icon-dashang" aria-hidden="true">
                                    <use xlink:href="#icon-dashang"></use>
                                </svg>
                                <span>打赏</span>
                            </div>
                            <div>
                            <div class="popup-2" v-show="item.Id==id">
                                <p class="first" @click="HandleLike(item.Id,Pindex)">
                                    <svg class="icon icon-jia" aria-hidden="true">
                                        <use xlink:href="#icon-zan"></use>
                                    </svg> 
                                    <span >赞</span>
                                </p>
                                <p @click="handleComment(item.Id,Pindex)">
                                       <svg class="icon icon-jia" aria-hidden="true">
                                        <use xlink:href="#icon-pinglun"></use>
                                    </svg> 
                                    <span>评论</span>
                                </p>
                            </div>
                                <img src="~@/assets/talk_logo.png" @click="popupAction(item.Id)"/>
                            </div>     
                        </div>
                        <!-- 点赞 -->
                        <div class="rewarder">
                            <p class="p-top"></p>
                            <p class="p-bottom">
                                <svg class="icon icon-jia" aria-hidden="true">
                                    <use xlink:href="#icon-zan"></use>
                                </svg>
                                <span v-for="(like,lindex) in item.LikeMembers" :key="lindex">{{like.uname}} 、</span>
                            </p>
                        </div>
                        <div class="talk-area">

                            <p class="p-ques" @click="answerSome(item.Id,comment.id,Pindex)" v-for="(comment,cindex) in item.Comments" :key="cindex">
                                <template v-if="comment.pid==0">
                                   <router-link :to="'/m/'+comment.uid" ><span class="name">{{comment.uname}}</span></router-link> ：
                                    <span>{{comment.info}}</span>
                                </template>
                               <template v-else>
                                    <router-link :to="'/m/'+comment.uid" ><span class="name">{{comment.uname}}</span></router-link>  &nbsp; 回复&nbsp;
                                    <span class="name">{{comment.pName}}</span>：{{comment.info}}
                                </template>
                            </p>
                        </div>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                   <!-- 展示区域 -->
               <div class="area-2">
                    <div class="bleachery-item" v-for="(item,Pindex) in dailys" :key="Pindex" >
                        <dl class="item-hd">
                            <dt>
                                 <router-link :to="'/m/'+item.Uid"><img :src="item.Headportrait"/></router-link> 
                            </dt>
                            <dd>
                                <p class="p-top">
                                      <router-link :to="'/m/'+item.Uid"><span class="p-name">{{item.UserName}}</span></router-link> 
                                    <span class="p-tips">{{item.Tags}}</span>
                                </p>
                                <p class="p-bottom">{{item.AddTime}}</p>
                            </dd>
                        </dl>
                        <p class="p-sentence">{{item.Info}}</p>
                        <!-- 图片 -->
                        <!--  v-bind:data-original="img.replace('_ms.','_mx.')"  -->
                          
                         <div class="img-box">
                            <div>
                                <!-- <img v-bind:data-original="img.replace('_ms.','_mx.')" v-bind:src="img" /> -->
                                <img  v-for="(img,index) in item.ArrAtlas" :key="index" :src="img" :preview="item.Id" preview-text="上下拖动图片可退出预览">
                            </div>
                            
                        </div>
                        <!-- 打赏 -->
                        <div class="reward-area" >
                            <div @click="rewardShow(item.Id)" class="reward-button">
                                <svg class="icon  icon-dashang" aria-hidden="true">
                                    <use xlink:href="#icon-dashang"></use>
                                </svg>
                                <span>打赏</span>
                            </div>
                            <div>
                            <div class="popup-2" v-show="item.Id==id">
                                <p class="first"  @click="HandleLike(item.Id,Pindex)">
                                    <svg class="icon icon-jia" aria-hidden="true">
                                        <use xlink:href="#icon-zan"></use>
                                    </svg> 
                                    <span >赞</span>
                                </p>
                                <p @click="handleComment(item.Id,Pindex)">
                                    <svg class="icon icon-jia" aria-hidden="true">
                                        <use xlink:href="#icon-pinglun"></use>
                                    </svg> 
                                    <span>评论</span>
                                </p>
                            </div>
                                <img src="~@/assets/talk_logo.png" @click="popupAction(item.Id)"/>
                            </div>     
                        </div>
                        <!-- 点赞 -->
                        <div class="rewarder">
                            <p class="p-top"></p>
                            <p class="p-bottom">
                                <svg class="icon icon-jia" aria-hidden="true">
                                    <use xlink:href="#icon-zan"></use>
                                </svg>
                                <span v-for="(like,lindex) in item.LikeMembers" :key="lindex">{{like.uname}}</span>
                            </p>
                        </div>
                        <div class="talk-area">

                            <p class="p-ques" @click="answerSome(item.Id,comment.id,Pindex)" v-for="(comment,cindex) in item.Comments" :key="cindex">
                                <template v-if="comment.pid==0">
                                     <router-link :to="'/m/'+comment.uid" ><span class="name">{{comment.uname}}</span></router-link> ：
                                    <span>{{comment.info}}</span>
                                </template>
                               <template v-else>
                                     <router-link :to="'/m/'+comment.uid" ><span class="name">{{comment.uname}}</span></router-link> &nbsp; 回复&nbsp;
                                    <span class="name">{{comment.pName}}</span>：{{comment.info}}
                                </template>
                            </p>
                        </div>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <!-- 展示区域 -->
             <div class="area-2">
                    <div class="bleachery-item" v-for="(item,Pindex) in dailys" :key="Pindex" >
                        <dl class="item-hd">
                            <dt>
                                <router-link :to="'/m/'+item.Uid"><img :src="item.Headportrait"/></router-link> 
                            </dt>
                            <dd>
                                <p class="p-top">
                                       <router-link :to="'/m/'+item.Uid"><span class="p-name">{{item.UserName}}</span></router-link> 
                                    <span class="p-tips">{{item.Tags}}</span>
                                </p>
                                <p class="p-bottom">{{item.AddTime}}</p>
                            </dd>
                        </dl>
                        <p class="p-sentence">{{item.Info}}</p>
                        <!-- 图片 -->
                        <!--  v-bind:data-original="img.replace('_ms.','_mx.')"  -->
                          
                         <div class="img-box">
                            <div>
                                <!-- <img v-bind:data-original="img.replace('_ms.','_mx.')" v-bind:src="img" /> -->
                                <img  v-for="(img,index) in item.ArrAtlas" :key="index" :src="img" :preview="item.Id" preview-text="上下拖动图片可退出预览">
                            </div>
                            
                        </div>
                        <!-- 打赏 -->
                        <div class="reward-area">
                            <div @click="rewardShow(item.Id)" class="reward-button">
                                <svg class="icon  icon-dashang" aria-hidden="true">
                                    <use xlink:href="#icon-dashang"></use>
                                </svg>
                                <span>打赏</span>
                            </div>
                            <div>
                            <div class="popup-2" v-show="item.Id==id">
                                <p class="first" @click="HandleLike(item.Id,Pindex)">
                                    <svg class="icon icon-jia" aria-hidden="true">
                                        <use xlink:href="#icon-zan"></use>
                                    </svg> 
                                    <span  >赞</span>
                                </p>
                                <p @click="handleComment(item.Id,Pindex)">
                                    <svg class="icon icon-jia" aria-hidden="true">
                                        <use xlink:href="#icon-pinglun"></use>
                                    </svg> 
                                    <span>评论</span>
                                </p>
                            </div>
                                <img src="~@/assets/talk_logo.png" @click="popupAction(item.Id)"/>
                            </div>     
                        </div>
                        <!-- 点赞 -->
                        <div class="rewarder">
                            <p class="p-top"></p>
                            <p class="p-bottom">
                                <svg class="icon icon-jia" aria-hidden="true">
                                    <use xlink:href="#icon-zan"></use>
                                </svg>
                                <span v-for="(like,lindex) in item.LikeMembers" :key="lindex">{{like.uname}}</span>
                            </p>
                        </div>
                        <div class="talk-area">

                            <p class="p-ques" @click="answerSome(item.Id,comment.id,Pindex)" v-for="(comment,cindex) in item.Comments" :key="cindex">
                                <template v-if="comment.pid==0">
                                    <router-link :to="'/m/'+comment.uid" ><span class="name">{{comment.uname}}</span></router-link>：
                                    <span>{{comment.info}}</span>
                                </template>
                               <template v-else>
                                       <router-link :to="'/m/'+comment.uid" ><span class="name">{{comment.uname}}</span></router-link>&nbsp; 回复&nbsp;
                                    <span class="name">{{comment.pName}}</span>：{{comment.info}}
                                </template>
                            </p>
                        </div>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="4">
                <!-- 展示区域 -->
                <div class="area-2">
                    <div class="bleachery-item" v-for="(item,Pindex) in dailys" :key="Pindex">
                        <dl class="item-hd">
                            <dt>
                               <router-link :to="'/m/'+item.Uid"><img :src="item.Headportrait"/></router-link> 
                            </dt>
                            <dd>
                                <p class="p-top">
                                      <router-link :to="'/m/'+item.Uid"><span class="p-name">{{item.UserName}}</span></router-link> 
                                    <span class="p-tips">{{item.Tags}}</span>
                                </p>
                                <p class="p-bottom">{{item.AddTime}}</p>
                            </dd>
                        </dl>
                        <p class="p-sentence">{{item.Info}}</p>
                        <!-- 图片 -->
                        <!--  v-bind:data-original="img.replace('_ms.','_mx.')"  -->
                          
                         <div class="img-box">
                           <div>
                                <!-- <img v-bind:data-original="img.replace('_ms.','_mx.')" v-bind:src="img" /> -->
                                <img  v-for="(img,index) in item.ArrAtlas" :key="index" :src="img" :preview="item.Id" preview-text="上下拖动图片可退出预览" >
                            </div>
                            
                        </div>
                        <!-- 打赏 -->
                        <div class="reward-area">
                            <div class="reward-button" @click="rewardShow(item.Id)" >
                                <svg class="icon  icon-dashang" aria-hidden="true">
                                    <use xlink:href="#icon-dashang"></use>
                                </svg>
                                <span >打赏</span>
                            </div>
                            <div>
                            <div class="popup-2" v-show="item.Id==id">
                                <p class="first" @click="HandleLike(item.Id,Pindex)">
                                    <svg class="icon icon-jia" aria-hidden="true">
                                        <use xlink:href="#icon-zan"></use>
                                    </svg> 
                                    <span>赞</span>
                                </p>
                                <p @click="handleComment(item.Id,Pindex)">
                                    <svg class="icon icon-jia" aria-hidden="true">
                                        <use xlink:href="#icon-pinglun"></use>
                                    </svg> 
                                    <span>评论</span>
                                </p>
                            </div>
                                <img src="~@/assets/talk_logo.png" @click="popupAction(item.Id)"/>
                            </div>     
                        </div>
                        <!-- 点赞 -->
                        <div class="rewarder">
                            <p class="p-top"></p>
                            <p class="p-bottom">
                                <svg class="icon icon-jia" aria-hidden="true">
                                    <use xlink:href="#icon-zan"></use>
                                </svg>
                                <span v-for="(like,lindex) in item.LikeMembers" :key="lindex">{{like.uname}}</span>
                            </p>
                        </div>
                        <div class="talk-area">

                            <p class="p-ques" @click="answerSome(item.Id,comment.id,Pindex)" v-for="(comment,cindex) in item.Comments" :key="cindex">
                                <template v-if="comment.pid===0">
                              <router-link :to="'/m/'+comment.uid" ><span class="name">{{comment.uname}}</span></router-link>：
                                    <span>{{comment.info}}</span>
                                </template>
                               <template v-else>
                                <router-link :to="'/m/'+comment.uid" ><span class="name">{{comment.uname}}</span></router-link> &nbsp; 回复&nbsp;
                                    <span class="name">{{comment.pName}}</span>：{{comment.info}}
                                </template>
                            </p>
                        </div>
                    </div>
                </div>
            </mt-tab-container-item>
            <div v-show="loading" class="page-infinite-loading">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </div>
              
    </mt-tab-container>
    </div>
   
     <!-- 回复某人的输入框  -->
     <div v-show="allLoaded" class="page-infinite-data">亲！别拉了我是有底线的</div>
    <div class="answer-to" v-show="popupAnswer">
         <input type="text" placeholder="有爱评论,说点好听的" v-model="commentText"/>
        <mt-button type="primary" @click="sendAnswer">发送</mt-button>
    </div>
    <!-- 打赏某人弹窗 -->
    <mt-popup v-model="rewardVisible" popup-transition="popup-fade" class="rewardPopup">
        <div class="close-button" @click="rewardVisible=false">
           <img src="~@/assets/reward-close.png"/>
        </div>
        <div class="img-outer">
       <img :src="this.$store.state.userinfo.headportrait"/>
        </div>
        <p class="name">{{this.$store.state.userinfo.name}}</p>
        <div class="price-select">
            <span @click="handleReward(1)" :class="rewardIdx==1?'active':''">2元</span>
            <span @click="handleReward(2)" :class="rewardIdx==2?'active':''">5元</span>
            <span @click="handleReward(3)" :class="rewardIdx==3?'active':''">8元</span>
            <span @click="handleReward(4)" :class="rewardIdx==4?'active':''">10元</span>
        </div>
        <p class="extra-price">其他金额(优先支付其他金额)</p>
        <div class="input-box">
            <span>金额（元）</span>
            <input type="number" v-model="otherprice" placeholder="请输入金额"/>
        </div>
        <mt-button type="default" class="reward-button" @click="handleRewardPay">打赏</mt-button>
    </mt-popup>
    <!-- 遮罩层 -->
    <div class="hidder" @click="closeComment" v-show="commentShow">

    </div>

  </div>
</template>

<script>
import { Navbar, TabItem,TabContainer, TabContainerItem } from 'mint-ui';
import {GetPageList,CommentAdd,CommentDel,DailyLike} from '@/api/daily';
export default {
    data(){
        return{
            title:'晒场',
            to:'/',
            selected:'1',
            flag:false,
            id:'1000',
            loginId:0,
            rewardVisible:false, //打赏弹窗
            rewardIdx:1, //打赏索引
            rewardDailyId:0,
            commentText:'' ,//评论回复某人的输入框的值,
            commentdailyId:0,//评论的某个晒场id
            commentId:0,//回复时 某个评论的id
            commentCmd:"pl",//区别输入框是评论的还是回复的
            commentIndex:0,//评论索引
            popupAnswer:false,
            commentShow:false,

            dailys: {
                Comments:[],
                LikeMembers:[]
            },
            pageIndex:1,
            totalPage:0,
            loading: false, //是否显示加载中
            allLoaded: false, //加载完毕

            otherprice:0,//打赏其他金额
            price:0,//支付金额
        }
    },
    created(){
        this.Initialization();
       
        this.loginId=this.$store.state.userinfo.id;
    },
    updated(){
        this.$nextTick(function() {
            var totalH=$('.bleachery-area').height();
            $('.hidder').height(totalH);
        })
    },
    methods:{
        Initialization(){
            this.$indicator.open();
            setTimeout(() => {
                GetPageList(this.loginId,0,this.pageIndex,this.selected,'all').then(res => {
                if (res.StatusCode === 200) {
                    this.dailys = res.Data.PagedList;
                    this.totalPage = res.TotalPage;
                    this.$previewRefresh();
                    this.$indicator.close();
                }
                });
            }, 400);
        },
        //点赞
        HandleLike(id,index){
            if(this.loginId==0){
                  this.$toast("请先登录！！"); 
                   this.id=-1;
                  return false;
            }
             DailyLike(this.loginId,id).then(res=>{
              if(res.StatusCode===200){
                   this.$nextTick(function () {
                        this.dailys[index].LikeMembers = res.Data;
                         this.id=-1;
                    });
              }
              else{
                     this.$toast(res.Data); 
                     this.id=-1;
              }
          });
        },
        loadMore() {
            //分页加载更多
            if (this.pageIndex >= this.totalPage) {
                this.allLoaded = true;
                return;
            }
            this.loading = true;
            setTimeout(() => {
                this.pageIndex++;
                GetPageList(this.loginId,0,this.pageIndex,this.selected,'all').then(res => {
                if (res.StatusCode === 200) {
                    this.dailys = this.dailys.concat(res.Data.PagedList);
                }
                });
                this.loading = false;
          }, 1000);
        },
        // 评论打赏弹窗出现
        popupAction(index){
            this.flag=!this.flag;
            this.commentShow=true;
            if(this.flag){
                this.id=index;
            }
            else{
                this.id=1000;
            }
        },
        // 弹出回复某人
        answerSome(id,pid,index){
           this.commentdailyId=id;
           this.commentId=pid;
         this.commentIndex=index;
           this.commentCmd="hf",
           this.popupAnswer=!this.popupAnswer;
           this.commentShow=true;
        },
        //点赞操作
        handleZan(){
            this.id=1000;
            this.flag=false;
            this.commentShow=false;
        },
        // 评论操作
        handleComment(id,index){
            this.commentdailyId=id;
            this.commentCmd="pl";
            this.commentId=0;
           this.commentIndex=index;
            this.id=1000;
            this.flag=false;
            this.popupAnswer=true;

        },
        // 确认发送回复
        sendAnswer(){
            if(this.loginId==0){
                  this.$toast("请先登录！！"); 
                  return false;
            }
            this.commentText=  this.commentText.replace(/(^\s*)|(\s*$)/g, "");
            if(  this.commentText==""){
                      this.$toast("评论不能为空"); 
                      return false;
            }
          var data={
              uid:this.loginId,
              dailyId:this.commentdailyId,
              pid:this.commentId,
              info:this.commentText
          }
           CommentAdd(data).then(res=>{
            if(res.StatusCode===200){
                   this.$nextTick(function () {
                       this.dailys[this.commentIndex].Comments = this.dailys[this.commentIndex].Comments.concat(res.Data);
                       this.commentText="";
                       this.$toast("评论成功");
             })
            }
            });
         this.commentText="";
            this.popupAnswer=false;
            this.commentShow=false;
        },
        // 关闭回复弹框
        closeComment(){
            this.popupAnswer=false;
            this.commentShow=false;
            this.flag=false;
            this.id=1000;

        },
        //打赏弹窗出现
        rewardShow(dailyid){
            if(this.$store.state.userinfo.id==0){
               this.$router.push("/auth/login");    
            }
            this.rewardDailyId=dailyid;
            this.rewardVisible=true;

        },
        //切换选择金额
        handleReward(index){
            this.rewardIdx=index;
            switch (index) {
                case 1:
                    this.price=2;
                    break;
               case 2:
                    this.price=5;
                    break;
               case 3:
                   this.price=8;
                    break;
               case 4:
                  this.price=10;
                     break;
                default:
                    break;
            }
        },
        // 提交打赏
        handleRewardPay(){
            //微信支付
            var price=0;
            if(this.otherprice==0){
                price=this.price;
            }
            else{
                price=this.otherprice;
            }
         var url=`http://www.zhugongzhe.com/OAuth2/wx/?uid=${this.$store.state.userinfo.id}&type=1&expandId=${this.rewardDailyId}&$summary=筑功者晒场打赏&price=${price}&backurl=${window.location.href}`;
         window.location.href=url;
        }
    },
    watch:{
        selected(val,oldval){
            this.selected=val;
            this.pageIndex=1;
            this.Initialization();
        }
    },
  
  
}
</script>

<style lang="scss" scoped>
.mint-navbar{
    border-bottom: 10px solid #f4f4f4;
}
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 2px solid #fd4f00;
  color: #df4f00;
  margin-bottom: -2px;
}
.mint-tab-item .mint-tab-item-label {
  font-size: 14px ;
  color: #282828;
}
.bleachery-area{
    min-height: 736px;
    background: #f4f4f4;
}
.area-2{
    .bleachery-item{
        padding-top:16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #f4f4f4; 
        background: #fff;      
        .item-hd{
            margin-left:12px;
            margin-right: 12px;
            display: flex;
            dt{
                width: 40px;
                height: 40px;
                img{
                    width: 40px;
                    height: 40px;
                    display: block;
                    border-radius: 50%;
                }
            }
            dd{
                margin-left:12px;
                .p-top{
                    .p-name{
                        font-size: 14px;
                        color:#333333;
                    }
                    .p-tips{
                        padding: 1px 6px;
                        line-height: 18px;
                        border:1px solid #999999;
                        color:#999999;
                        border-radius: 9px;
                        margin-left: 8px;
                    }
                }
                .p-bottom{
                    color:#666666;
                }

            }
        }
        .p-sentence{
            margin-top:14px;
            color:#666666;
            font-size: 14px;
            line-height: 1.6;
            margin-left:12px;
            margin-right: 12px;
        }
        .img-box{
            margin-left: 7px;
            margin-right: 7px;
            margin-top: 12px;
            div{
                width: 100%;
                 margin-bottom: 7px;
                 display: flex;
                 flex-wrap: wrap;
            }
            img{
                width: 33%;
                height: 124px;
                margin-right: 0.5%;
                margin-bottom: 0.5%;
                &:nth-child(3n+0){
                    margin-right: 0;
                } 
            }
        }
        .reward-area{
            margin-left:12px;
            margin-right: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 30px;
            div{
                display: flex;
                align-items: center;
                span{
                    font-size: 14px;
                    color:#666666;
                    margin-left: 10px;
                }
                p{
                    display: flex;
                    align-items: center;

                }
            }
            .reward-button{
                display: flex;
                align-items: center;
                .icon{
                    margin-top:-2px;
                }
            }
            .icon-dashang{
                color:#666666;
            }
            .popup-2{
                padding: 5px 15px;
                background: #333333;
                border-radius: 3px;
                justify-content: space-between;
                margin-right: 10px;
                z-index: 999;
                .first:after{
                    content: '|';
                    background: #282828;
                    margin: 0 5px;
                }
                span{
                    color:#ffffff;
                }
                .icon{
                    color:#ffffff;
                }

            }
            .icon{
                font-size: 16px;
            }
            img{
                width: 22.6px;
                height: 14px;
                z-index: 999;
            }
        }
        .rewarder{
            margin-left: 12px;
            margin-right: 12px;
            margin-top: 7px;
            .p-top{
                width: 0;
                height: 0;
                border-left:4px solid transparent;
                border-right: 4px solid transparent;
                border-bottom: 8px solid #f4f4f4;
                margin-left: 10px;
            }
            .p-bottom{
                background: #f4f4f4;
                padding: 6px 7px;
                color:#5f8fd8;
                display: flex;
                align-items: center;
                .icon{
                    margin-right: 7px;
                }
                span{
                    margin-right: 10px;
                }
            }
        }
        .talk-area{
            margin: 0px 12px;
            border-top: 1px solid #dcdcdc;
            background: #f4f4f4;
            padding: 6px 8px;
            .p-ques{
                margin-bottom:6px; 
            }
            .name{
                color:#5f8fd8;
            }
        }   

    }
}
// 回复某人弹窗
.answer-to{
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    border-top:1px solid #ccc;
    input{
        width: 80%;
        padding-left: 5px;
    }
    .mint-button{
        width: 20%;
        background: #fd4f00;
        font-size: 14px;
        border-radius: 0;
    }

    
}

//遮罩层
.hidder{
    background: pink;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}
//打赏弹窗
.rewardPopup{
    width: 96%;
    padding: 20px 10px;
    border-radius: 5px;
    .close-button{
        width: 13px;
        height: 13px;
        overflow: hidden;
        position: absolute;
        right:10px;
        top:10px;
        img{
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
    }
    .img-outer{
        width: 41.3px;
        height: 41.3px;
        overflow: hidden;
        border-radius: 50%;
        margin:0 auto;
        img{
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
    }
    .name{
        color:#333;
        font-size: 14px;
        text-align: center;
        margin:10px auto;
    }
    .price-select{
        display: flex;
        justify-content: space-between;
        span{
            width: 80px;
            height: 30px;
            border:1px solid #3887fe;
            border-radius: 5px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            color:#3887fe;
        }
        .active{
            background: #3887fe;
            color:#fff;
        }
    }
    .extra-price{
        font-size: 16px;
        color:#666;
        text-align: center;
        margin-top:28px;
        margin-bottom: 16px;
    }
    .input-box{
        width: 100%;
        border:1px solid #eeeeee;
        height: 40px;
        padding: 0 23.3px;
        display: flex;
        align-items: center;
        span{
            font-size: 16px;
            color:#333;
        }
        input{
           height: 25px;
        //    line-height: 25px;
        margin-top:3px;
        color:#999;
        font-size: 16px;
        }
        input::-webkit-input-placeholder{
            color:#999;
            font-size: 16px;
        }
    }
    .reward-button{
        width: 140px;
        height: 32px;
        background: #ff0000;
        color:#fff;
        text-align: center;
        line-height: 32px;
        margin:33px auto;
        display: block;
        margin-bottom: 0;
    }
}
</style>
